<template>
	<view>
		<myhead txt="我的"></myhead>
		<view class="main">
			<view class="userMain">
				<view @tap='register'>
					<image src="../../static/touxiang.png" mode="aspectFill"></image>
					<view>
						<view style="margin-bottom: 2vw;font-size: 5.5vw;">{{userInfo?userInfo.nickName:'登录/注册'}}</view>
						<view>{{userInfo?'邀请码：'+userInfo.code:'立即登录查看更多内容'}}</view>
					</view>
				</view>
				<view>
					<view><navigator url="recharge" hover-class="navigator-hover">充币</navigator></view>
					<view><navigator url="tixian" hover-class="navigator-hover">提币</navigator></view>
				</view>
			</view>
			<navigator url="assets" hover-class="navigator-hover" class="list">
				<view>我的资产</view>
				<view>❯</view>
			</navigator>
			<navigator url="security" hover-class="navigator-hover" class="list">
				<view>安全中心</view>
				<view>❯</view>
			</navigator>
			<navigator url="code" hover-class="navigator-hover" class="list">
				<view>邀请二维码</view>
				<view>❯</view>
			</navigator>
			<navigator url="address" hover-class="navigator-hover" class="list">
				<view>提币地址管理</view>
				<view>❯</view>
			</navigator>
			<navigator url="userName" hover-class="navigator-hover" class="list">
				<view>实名认证</view>
				<view>❯</view>
			</navigator>
			<navigator url="myGuanggao" hover-class="navigator-hover" class="list">
				<view>我的广告</view>
				<view>❯</view>
			</navigator>
			<navigator url="myOrder" hover-class="navigator-hover" class="list">
				<view>我的订单</view>
				<view>❯</view>
			</navigator>
			<navigator v-if="userInfo.accountType==1" url="../bank/bankList" hover-class="navigator-hover" class="list">
				<view>功能测试</view>
				<view>❯</view>
			</navigator>
			<block v-if="userInfo">
				<view class="btn" @tap="tcBtn">
					退出
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	const http = require('../../utils/http.js');
	export default {
		data() {
			return {
				userInfo:null
			}
		},
		onShow() {
			uni.showLoading({
			    title: '加载中'
			});
			http.get('/api/user/accountInfo').then(res => {
				if (res.code == 200 && res.result) {
					this.userInfo=res.result
				}
				uni.hideLoading();
			})
			// if(uni.getStorageSync('userInfo')){
			// 	this.userInfo=uni.getStorageSync('userInfo')
			// 	//console.log(this.userInfo.accountType)
			// }else{
			// 	this.userInfo=null
			// }
		},
		methods: {
			register:function(){
				//console.log('asd')
				if(uni.getStorageSync('userInfo')){
					return false
				}
				uni.navigateTo({
				  url: '/pages/user/login'
				});
			},
			tcBtn:function(){
				http.get('/api/user/logout').then(res => {
					//console.log(res)
					if (res.code == 200) {
						uni.removeStorageSync('userInfo');
						uni.removeStorageSync('token');
						this.userInfo=null
						//console.log(this.userInfo)
						uni.navigateBack({
							url:'/pages/user/login'
						})
					}
					uni.showToast({
					  title: res.message,
					  icon: 'none'
					});
				})
			}
		}
	}
</script>

<style>
	.main{
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-bottom: 10vw;
	}
	.userMain{
		width: 80%;
		margin-top: 4vw;
		background-image: linear-gradient(45deg, #24EBA9, #10C7B2);
		border-radius: 2vw;
		padding: 10vw 6vw;
		color: #FFFFFF;
	}
	.userMain>view{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.userMain image{
		width: 20vw;
		height: 20vw;
		border-radius: 50vw;
		margin-right: 6vw;
	}
	.userMain>view:nth-child(2){
		justify-content: space-around;
		margin-top: 6vw;
	}
	.userMain>view:nth-child(2)>view{
		width: 50%;
		text-align: center;
		padding: 0.4vw 0;
		border-right: 1px solid #FFFFFF;
	}
	.userMain>view:nth-child(2)>view:last-child{
		border-right: none;
	}
	.list{
		width: 85%;
		padding: 4vw 3vw;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #f2f2f2;
		color: #333333;
	}
	.list:last-child{
		border-bottom: none;
	}
	.btn{
		width: 84%;
		padding: 4vw 0;
		font-size: 3.5vw;
		border-radius: 1.8vw;
		background-image: linear-gradient(45deg, #24EBA9, #10C7B2);
		color: #FFFFFF;
		text-align: center;
		margin: 0 auto;
		margin-top: 10vw;
	}
</style>
